<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">登录|注册</span>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button  class="sub-btn" type="primary" @click="onSubmit">立即创建</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: "Login",
  data(){
    return{
      form:{
        username:'',
        password:''
      }
    }
  },
  methods:{
    ...mapActions(['setUserNameAction','setTokenAction']),
    onSubmit(){
      this.$api.postLogin(this.form)
      .then(data=>{
        console.log(data)
        if(data.status == 200){
          // 存储起来token和用户名，存vuex
          this.setUserNameAction(data.data[0].username)
          this.setTokenAction(data.token)
          // 存本地
          localStorage.setItem('egouser',data.data[0].username);
          localStorage.setItem('egotoken',data.token)
          // 返回上一层
          this.$router.back();
        }else{
          this.$message.error(data.msg)
          this.form.username = ''
          this.form.password = ''
        }
      })
    }
  }
};
</script>

<style scoped>
.login {
    width: 100%;
}
.box-card {
    width: 600px;
    margin: 0 auto;
    margin-top: 100px;
}
.title{
  display: block;
  text-align: center;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.sub-btn{
  margin-left:160px;
}
</style>